{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto text-center">
        <h1 class="display-4 mb-4">AILesson - ИИ-эксперты в твоем телефоне</h1>
        <p class="lead mb-5">Преврати скучные уроки в увлекательные игровые миры с ИИ-экспертами!</p>
        
        <div class="row mb-5">
            <div class="col-md-4 mb-4">
                <div class="card h-100 expert-card">
                    <div class="card-body text-center">
                        <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                            <i class="material-icons">school</i>
                        </div>
                        <h5 class="card-title">ИИ-Эксперты</h5>
                        <p class="card-text">Общайся с виртуальными экспертами в разных предметах</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 lesson-card">
                    <div class="card-body text-center">
                        <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                            <i class="material-icons">menu_book</i>
                        </div>
                        <h5 class="card-title">Интерактивные уроки</h5>
                        <p class="card-text">Превращай учебные материалы в увлекательные квесты</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4 scroll-animate">
                <div class="card h-100 gamification-card">
                    <div class="card-body text-center">
                        <div class="rounded-pill bg-warning d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                            <i class="material-icons">gamepad</i>
                        </div>
                        <h5 class="card-title">Геймификация</h5>
                        <p class="card-text">Собирай монеты мудрости и достигай новых высот</p>
                    </div>
                </div>
            </div>
        </div>
        
        {% if not current_user.is_authenticated %}
        <div class="mt-4">
            <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg me-3"><i class="material-icons me-2">person_add</i>Зарегистрироваться</a>
            <a href="{{ url_for('login') }}" class="btn btn-outline-primary btn-lg"><i class="material-icons me-2">login</i>Войти</a>
        </div>
        {% else %}
        <div class="mt-4">
            <a href="{{ url_for('dashboard') }}" class="btn btn-primary btn-lg"><i class="material-icons me-2">dashboard</i>Перейти в кабинет</a>
            <a href="{{ url_for('select_expert') }}" class="btn btn-outline-primary btn-lg"><i class="material-icons me-2">school</i>Выбрать эксперта</a>
        </div>
        {% endif %}
    </div>
</div>

<div class="mt-4">
    <div class="col-lg-10 mx-auto">
        <h2 class="text-center mb-4">Как это работает</h2>
        <div class="how-it-works-section" style="overflow: hidden;">
            <div class="how-it-works-item">
                <div class="p-4 text-center item-content">
                    <div class="icon-container bg-primary text-white d-flex align-items-center justify-content-center mx-auto mb-3">
                        <i class="material-icons">upload_file</i>
                    </div>
                    <h5>Загрузи урок</h5>
                    <p class="text-muted">Добавь текст урока или фотографию</p>
                </div>
            </div>
            <div class="how-it-works-item">
                <div class="p-4 text-center item-content">
                    <div class="icon-container bg-success text-white d-flex align-items-center justify-content-center mx-auto mb-3">
                        <i class="material-icons">psychology</i>
                    </div>
                    <h5>Обработка ИИ</h5>
                    <p class="text-muted">Наш ИИ превращает материал в игру</p>
                </div>
            </div>
            <div class="how-it-works-item">
                <div class="p-4 text-center item-content">
                    <div class="icon-container bg-warning d-flex align-items-center justify-content-center mx-auto mb-3">
                        <i class="material-icons">gamepad</i>
                    </div>
                    <h5>Игровой процесс</h5>
                    <p class="text-muted">Изучай материал в формате игры</p>
                </div>
            </div>
            <div class="how-it-works-item">
                <div class="p-4 text-center item-content">
                    <div class="icon-container bg-info text-white d-flex align-items-center justify-content-center mx-auto mb-3">
                        <i class="material-icons">emoji_events</i>
                    </div>
                    <h5>Награды</h5>
                    <p class="text-muted">Получай монеты и достижения</p>
                </div>
            </div>
        </div>
    </div>
    
    {% block scripts %}
    <style>
        .how-it-works-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 0;
            position: relative;
        }
        .how-it-works-item {
            background-color: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 6px;
            width: 80%;
            max-width: 400px;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s ease;
        }
        .how-it-works-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .how-it-works-item:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .icon-container {
            width: 70px;
            height: 70px;
            border-radius: 12px; /* Slightly rounded rectangle */
            font-size: 1.8rem;
        }
        .item-content {
            padding: 20px;
        }
        .gamification-card {
            border-left: 5px solid var(--wisdom-coin) !important;
        }
    </style>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const howItWorksItems = document.querySelectorAll('.how-it-works-item');
            
            const observerOptions = {
                threshold: 0.2,
                rootMargin: '0px 0px -50px 0px'
            };
    
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    } else {
                        entry.target.classList.remove('visible');
                    }
                });
            }, observerOptions);
    
            howItWorksItems.forEach(item => {
                observer.observe(item);
            });
        });
    </script>
    {{ super() }}
    {% endblock %}
</div>
{% endblock %}